<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
		<meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
    <title>异常处置项目管理</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../admin/css/other/department.css" />
  </head>
  <body class="pear-container">

    <div class="layui-row layui-col-space10">
      <div class="layui-col-md10 layui-col-md-offset1">
        <div class="layui-card">
          <div class="layui-card-body">
            <table id="abHandleItem-table" lay-filter="abHandleItem-table"></table>
          </div>
        </div>
      </div>
    </div>

    <script type="text/html" id="my-toolbar">
      <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="addAbHandleItem">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
      </button>
      <!--简单查询-->
      <div class="layui-inline" style="width:250px!important;height:34px!important;padding-left:30px">
        <input class="layui-input " id="keyword" style="height: 100%;width:130px;display: inline-block;" type="text" placeholder="查询关键字" autocomplete="off"></input>
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="searchKeyword">
          <i class="layui-icon layui-icon-search"></i>
        </button>
        <button class="pear-btn pear-btn-sm" lay-event="clearSearch" style="display:none">
          <i class="layui-icon layui-icon-close"></i>
        </button>
      </div>
    </script>

    <script type="text/html" id="my-row-toolbar">
      <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>
      </button>
      <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" >
        <i class="layui-icon layui-icon-delete"></i>
      </button>
    </script>

    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>

    <script type="text/javascript">
      // 加载自定义模块,检查浏览器和token
      layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });
      layui.use(
        ["table", "form", "jquery", "myheader", "popup", "layer"],
        function () {
          let table = layui.table;
          let form = layui.form;
          let $ = layui.jquery;
          let myheader = layui.myheader;
          let popup = layui.popup;
          let layer = layui.layer;
          
          // 定义全局 ajax的请求头
          myheader.ajaxGlobal(myheader.checkToken().tokenValue);

          // 定义常量
          const baseUrl = myheader.baseUrl();
          const MODULE_PATH = "operate/";
          const mypage = {};

          // 列参数
          let abHandleItemCols = [
            [
              { type: "numbers" },
              { title: "处置名称", templet:function(d){
                return d.abHandleItem.abHandleItemName
              }},
              { 
                title: "记录方法", 
                field: "abHandleItemContentType",
                templet:function(d){
                  if(d.abHandleItem.abHandleItemContentType=='select'){
                    return "<font style='color:#1685a9'>被选项<i class='layui-icon layui-icon-ok-circle'></i></font>"
                  } 
                  return "<font style='color:#FF3300'>文本<i class='layui-icon layui-icon-form'></i></font>"
                }
                
              },
              { title: "所属工程", templet:function(d){
                return d.secDept.secDeptName
              }},
              {
                title: "是否可用",
                field: "enabled",
                templet: "#abHandleItem-enabled",
                event: "setEnabled",
                width:100
              },
              { title: "操作", toolbar: "#my-row-toolbar", align: "center" , width:110},
            ],
          ];

          // 渲染表格
          const tableIdx = table.render({
            elem: "#abHandleItem-table",
            // 请求
            url: baseUrl + "/abHandleItem/findAll",
            cols: abHandleItemCols,
            response: {
              // 重新设定返回的数据格式
              statusCode: 200, //默认返回 code:0 为返回成功,改成200
              countName: "total", //默认数组总量字段是count,改成total
            },
            // 样式
            skin: "line",
            //分页
            page: true, // 分页
            // 工具
            // 头部左侧工具栏使用模板
            toolbar: "#my-toolbar",
            // 头部右侧工具栏
            defaultToolbar: [
              {
                title: "刷新",
                layEvent: "refresh",
                icon: "layui-icon-refresh",
              },
              // "filter",
              // "exports",
              // "print",
            ],

          });

          // 工具栏
          table.on("toolbar(abHandleItem-table)", function (obj) {
            const layEvent = obj.event;
            if (layEvent === "refresh") {
              table.reloadData("abHandleItem-table", {
                scrollPos: "fixed", // 保持滚动条位置不变 - v2.7.3 新增
              });
            } else if(layEvent==='addAbHandleItem') {
              mypage.addAbHandleItem()
            } else if (layEvent==='searchKeyword'){
              mypage.searchKeyword()
            } else if(layEvent==='clearSearch'){
              mypage.clearSearch()
            }
          });

          // 行 事件
          table.on("tool(abHandleItem-table)", function (obj) {
            let layEvent = obj.event; // 当前事件

            if (layEvent === "setEnabled") {       // 改变行的enabled值  
              mypage.setEnabled(obj);
            } else if (layEvent === "remove") {    // 删除行 
              mypage.delLine(obj);
            } else if (layEvent === "edit") {     // 编辑行
              mypage.edit(obj);
            } 
          });

          // 单元格编辑事件
          table.on("edit(abHandleItem-table)",function(obj){
            // mypage.editCell(obj)
          })

          // 改变enabled值 函数
          mypage.setEnabled = function (obj) {
            let data = obj.data; //行数据
            layer.confirm("确定".concat(data.abHandleItem.enabled ? "禁用" : "启用", "吗?"),
              {
                btn:['确定','取消'],
                cancel:function(){
                  obj.update({
                    enabled: data.abHandleItem.enabled,
                  });
                }
              },
              // 确认时的回调
              function (layerIdx) {
                $.ajax(baseUrl + "/abHandleItem/uptEnabled", {
                  type: "post",
                  data: {
                    abHandleItemID: data.abHandleItem.abHandleItemID,
                    enabled: !data.abHandleItem.enabled,
                  },
                  success: function (res) {
                    if (res.data === 1) {
                      obj.update({
                        enabled: !data.abHandleItem.enabled,
                      });
                      layer.msg("已保存", { time: 1000 });
                    } else {
                      layer.alert("变更失败", { icon: 2 });
                    }
                  },
                  complete: function () {
                    table.reloadData("abHandleItem-table", {
                      scrollPos: "fixed", // 保持滚动条位置不变 - v2.7.3 新增
                    });
                    layer.close(layerIdx); //关闭确认框
                  },
                });
              },
              // 取消时的回调
              function () {
                obj.update({
                  enabled: data.abHandleItem.enabled,
                });
              }
              
              
            );
          };
          // 删除行 函数
          mypage.delLine = function (obj) {
            let data = obj.data;
            layer.confirm("确定删除吗?", function (layerIdx) {
              $.ajax(baseUrl + "/abHandleItem/delAbHandleItem", {
                type: "post",
                data: {
                  abHandleItemID: data.abHandleItem.abHandleItemID,
                },
                success: function (res) {
                  if (res.data === 1) {
                    obj.del();
                    layer.msg("已删除", { time: 1000 });
                  } else {
                    layer.msg("删除失败", { time: 1000 });
                  }

                },
                complete: function () {
                  table.reloadData('abHandleItem-table',{
                    scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                  })
                  layer.close(layerIdx); //关闭确认框
                },
              });
            });
          };
          // 编辑行数据 函数 
          mypage.edit = function (obj) {
            layui.sessionData('fu2zi',{
              key:'fuData',
              value:obj.data //行数据
            })
            
            layer.open({
              type: 2,
              title: "修改异常处置设置",
              shade: 0.1,
              area: ["auto", "100%"],
              content: MODULE_PATH + "abHandleItem-edit.html",
            });
          };
          // 新增部门 函数
          mypage.addAbHandleItem = function(){
            layer.open({
              type: 2,
              title: "新增异常处置",
              shade: 0.3,
              area: ["auto", "100%"],
              content: MODULE_PATH + "abHandleItem-add.html",
            });
          }
          // 检查查询功能  函数
          mypage.searchKeyword = function(){
            table.reloadData('abHandleItem-table',{
              where:{
                keyword: $('#keyword').val()
              },
              page:{
                curr:1
              }
            })
          }
          // 清空查询功能  函数
          mypage.clearSearch = function(){
            $('#keyword').val('')
            $('[lay-event=clearSearch]').hide()
            table.reloadData('abHandleItem-table',{
              where:{
              },
              page:{
                curr:1
              }
            })
          }
          
          // 查询框 输入字符 事件
          $("#keyword").bind('input propertychange',function(){
            if($('#keyword').val().length>0){
              $('[lay-event=clearSearch]').show()
            }else {
              $('[lay-event=clearSearch]').hide()
            }
          })
        }
      );
    </script>
    <script type="text/html" id="abHandleItem-enabled">
      <input id="enabled" type="checkbox" name="abHandleItem-enabled"
      value="{{d.abHandleItem.enabled}" lay-skin="switch" lay-text="启用|禁用" {{d.abHandleItem.enabled==true ? 'checked' : '' }}/>
    </script>
  </body>
</html>
